<!--
/**
* Author: KSJ
* Date: 2022-08-01 19:29
* Desc: 座位项
*/
-->
<!-- by your name -->
<template>
  <view
    :style="areaStyle"
    :class="[
      'seat-item',
      lovers ? 'lovers' : '',
      none ? 'none' : '',
      disabled ? 'disabled' : '',
      selected ? 'selected' : '',
      sold ? 'sold' : ''
    ]"
    @click.native="handleClick"
  ></view>
</template>

<script>
  import config from '@/config'
  export default {
    props: {
      lovers: {
        // 是否情侣
        type: Boolean,
        default: false
      },
      none: {
        // 是否空白
        type: Boolean,
        default: false
      },
      disabled: {
        // 是否不可选
        type: Boolean,
        default: false
      },
      selected: {
        // 是否已选
        type: Boolean,
        default: false
      },
      sold: {
        // 是否已售
        type: Boolean,
        default: false
      },
      item: {
        // 座位信息
        type: Object
      },
      areas: {
        // 分区
        type: Array
      }
    },

    computed: {
      areaStyle() {
        if (this.areas && this.areas.length > 0 && this.item.areaId) {
          return `background: url(
           ${config.ossUrl}/seatItem/area-seat-${this.areas.findIndex(
            (i) => i.areaId === this.item.areaId
          )}.png') no-repeat;background-size: 100% 100%;`
        }
        return ''
      }
    },
    data() {
      return {}
    },
    methods: {
      handleClick() {
        this.$emit('click', this.item)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .seat-item {
    margin: 3px;
    border-radius: 10rpx;
    background: #fff;
    // background: url('https://public-oss-file.zmaxfilm.com/applet/img/seatItem/ic_uncheck_s.png')
    // no-repeat;
    background-size: 100% 100%;
    width: 27px;
    height: 27px;
    color: lightpink;
    text-align: center;
  }
  .seat-item.lovers {
    background: url('https://public-oss-file.zmaxfilm.com/applet/img/film-oxygen-uniapp/seat-status/ic_love_uncheck.png')
      no-repeat !important;
    background-size: 100% 100% !important;
  }
  .seat-item.disabled {
    background: url('https://public-oss-file.zmaxfilm.com/applet/img/film-oxygen-uniapp/seat-status/ic_lock_s.png')
      no-repeat !important;
    background-size: 100% 100% !important;
  }
  .seat-item.disabled.lovers {
    background: url('https://public-oss-file.zmaxfilm.com/applet/img/film-oxygen-uniapp/seat-status/ic_love_lock.png')
      no-repeat !important;
    background-size: 100% 100% !important;
  }
  .seat-item.selected {
    background: url('https://public-oss-file.zmaxfilm.com/applet/img/film-oxygen-uniapp/seat-status/ic_checked_s.png')
      no-repeat !important;
    background-size: 100% 100% !important;
  }
  .seat-item.selected.lovers {
    background: url('https://public-oss-file.zmaxfilm.com/applet/img/film-oxygen-uniapp/seat-status/ic_love_checked.png')
      no-repeat !important;
    background-size: 100% 100% !important;
  }
  .seat-item.none {
    background: transparent !important;
  }
  .seat-item.sold {
    background: url('https://public-oss-file.zmaxfilm.com/applet/img/film-oxygen-uniapp/seat-status/ic_not_sale_s.png')
      no-repeat !important;
    background-size: 100% 100% !important;
  }
</style>
